<template>
	<div>
		<div class="content-main" style="position: relative;">
			<!-- 主模块 -->
			<div class="" style="margin-top: 60px;">
				<div style="height: 605px;position: relative;width: 1860px;">
					<!--          <div
            style="position: absolute;left: 330px;font-size: 20px;top: 10px;color: #1453ff;"
            @click="buttonShow=!buttonShow"
          >
            <i
              v-if="buttonShow"
              class="el-icon-d-arrow-left"
            />
            <i
              v-else
              class="el-icon-d-arrow-right"
            />
          </div> -->
					<div v-if="buttonShow" class="d-flex jc-center body-box radio-group-container"
						style="    position: relative;top: -30px;">
						<el-radio-group v-model="reportCata">

							<el-radio-button label="pac">
								PAC
							</el-radio-button>
							<el-radio-button label="pam">
								PAM
							</el-radio-button>
							<el-radio-button label="ty">
								碳源
							</el-radio-button>
							<!-- <el-radio-button label="hl">
								内外回流
							</el-radio-button> -->
						</el-radio-group>
					</div>
				</div>
			</div>
			<div style="position: absolute;top: 0px;left: 0px;">
				<!-- 模块1 -->
				<div class="bg" style="height: 270px;position: relative;width: 270px;">
					<div>
						<img src="../assets/icon-left-top.png">
						<div style="position: absolute;bottom: 0;">
							<img src="../assets/icon-left-bottom.png">
						</div>
						<div style="position: absolute;top: 3px;right: 3px;">
							<img src="../assets/icon-right-top2.png">
						</div>
						<div style="position: absolute;bottom: 0;right: 3px;">
							<img src="../assets/icon-right-bottom.png">
						</div>
					</div>
					<div class="title">
						<img src="../assets/icon-title.png">
						<span style="margin-left: 5px;">今日总览</span>
					</div>
					<div style="display: flex;justify-content: space-between;margin-top: 10px;">
						<div class="ring-container">
							<div class="ring">
								<div class="inner-text">
									809
								</div>
							</div>
							<div class="growth-button">
								PLC数据
							</div>
						</div>
						<div class="ring-container">
							<div class="ring">
								<div class="inner-text">
									172
								</div>
							</div>
							<div class="growth-button">
								安防设备
							</div>
						</div>
					</div>
					<div style="padding: 10px;margin-top: 10px;">
						<div style="display: flex;justify-content: space-between;">
							<div class="title2">
								异 常：
							</div>
							<div class="value">
								<span>
									--
								</span>
								<span class="unit">
									条
								</span>
							</div>
						</div>
						<div style="display: flex;justify-content: space-between;margin-top: 23px;">
							<div class="title2">
								巡 检：
							</div>
							<div class="value">
								<span>
									--
								</span>
								<span class="unit">
									条
								</span>
							</div>
						</div>
					</div>
				</div>
				<!-- 模块2 -->
				<div class="bg" style="height: 330px;position: relative;width: 270px;margin-top: 10px;">
					<div>
						<img src="../assets/icon-left-top.png">
						<div style="position: absolute;bottom: 0;">
							<img src="../assets/icon-left-bottom.png">
						</div>
						<div style="position: absolute;top: 3px;right: 3px;">
							<img src="../assets/icon-right-top2.png">
						</div>
						<div style="position: absolute;bottom: 0;right: 3px;">
							<img src="../assets/icon-right-bottom.png">
						</div>
					</div>
					<div class="title">
						<img src="../assets/icon-title.png">
						<span style="margin-left: 5px;">今日能耗</span>
					</div>
					<div style="position: relative;top: -10px;">
						<pieChart1 :date-str="reportDate" />
						<pieChart2 :date-str="reportDate" />
					</div>
				</div>
			</div>
			<div style="position: absolute;top: 40px;right: 300px;">
				<!-- 3D模块 -->
				<centerMain :report-cata="reportCata" />
			</div>



			<div style="position: absolute;top: 0px;right: 0px;">
				<!-- 模块1 -->
				<div class="bg" style="height: 370px;position: relative;width: 270px;">
					<div>
						<img src="../assets/icon-left-top.png">
						<div style="position: absolute;bottom: 0;">
							<img src="../assets/icon-left-bottom.png">
						</div>
						<div style="position: absolute;top: 3px;right: 3px;">
							<img src="../assets/icon-right-top2.png">
						</div>
						<div style="position: absolute;bottom: 0;right: 3px;">
							<img src="../assets/icon-right-bottom.png">
						</div>
					</div>
					<div class="title">
						<img src="../assets/icon-title.png">
						<span style="margin-left: 5px;">服务器总览</span>
					</div>
					<div style="padding: 0 10px;">
						<div style="display: flex;justify-content:space-between;">
							<gaugeChart1 :percent="percentage4" />
							<gaugeChart2 :percent="percentage5" />
						</div>
						<!-- <div style="margin-top: 20px;">
							<el-progress :text-inside="true" :percentage="percentage1" :stroke-width="20" />
						</div>
						<div style="margin-top: 20px;">
							<el-progress :text-inside="true" :percentage="percentage2" :stroke-width="20" />
						</div>
						<div style="margin-top: 20px;">
							<el-progress :text-inside="true" :percentage="percentage3" :stroke-width="20"
								:color="'#e7a92f'" />
						</div> -->

						<div v-for="(item, index) in diskInfo" class="item-view" :key="index" style="margin-top: 10px;">
							<el-progress :text-inside="true" :stroke-width="20" :percentage="setItemProgress(item)"
								:status="setItemStatus(item)" :format="setItemText(item)"></el-progress>
						</div>
					</div>
				</div>
				<!-- 模块2 -->
				<div class="bg" style="height: 230px;position: relative;width: 270px;margin-top: 10px;">
					<div>
						<img src="../assets/icon-left-top.png">
						<div style="position: absolute;bottom: 0;">
							<img src="../assets/icon-left-bottom.png">
						</div>
						<div style="position: absolute;top: 3px;right: 3px;">
							<img src="../assets/icon-right-top2.png">
						</div>
						<div style="position: absolute;bottom: 0;right: 3px;">
							<img src="../assets/icon-right-bottom.png">
						</div>
					</div>
					<div class="title">
						<img src="../assets/icon-title.png">
						<span style="margin-left: 5px;">药剂使用量</span>
					</div>
					<div>
						<rightCenter />
					</div>
				</div>
			</div>
		</div>
		<div class="content-bottom">
			<!-- 模块6 -->
			<div class="" style="margin-top: 20px;">
				<div class="bg" style="height: 200px;position: relative;width: 920px;">
					<div>
						<img src="../assets/icon-left-top.png">
						<div style="position: absolute;bottom: 0;">
							<img src="../assets/icon-left-bottom.png">
						</div>
						<div style="position: absolute;top: -10px;right: 0px;">
							<img src="../assets/icon-right-top.png">
						</div>
						<div style="position: absolute;bottom: 0;right: 3px;">
							<img src="../assets/icon-right-bottom.png">
						</div>
					</div>
					<div class="title">
						<img src="../assets/icon-title.png">
						<span style="margin-left: 5px;">异常列表</span>
					</div>
					<div style="padding: 10px;">
						<bottomLeft />
					</div>
				</div>
			</div>

			<!-- 模块7 -->
			<div class="" style="margin-top: 20px;">
				<div class="bg" style="height: 200px;position: relative;width: 920px;">
					<div>
						<img src="../assets/icon-left-top.png">
						<div style="position: absolute;bottom: 0;">
							<img src="../assets/icon-left-bottom.png">
						</div>
						<div style="position: absolute;top: -10px;right: 0px;">
							<img src="../assets/icon-right-top.png">
						</div>
						<div style="position: absolute;bottom: 0;right: 3px;">
							<img src="../assets/icon-right-bottom.png">
						</div>
					</div>
					<div class="title">
						<img src="../assets/icon-title.png">
						<span style="margin-left: 5px;">成本统计</span>
					</div>

					<div>
						<bottomRightChart :date-str="reportDate" :period-type="'month'" />
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import bottomLeft from './mainComponent/bottomLeft.vue'
	import bottomRightChart from './mainComponent/bottomRightChart.vue'
	import gaugeChart1 from './mainComponent/gaugeChart1.vue'
	import gaugeChart2 from './mainComponent/gaugeChart2.vue'
	import pieChart1 from './mainComponent/pieChart1.vue'
	import pieChart2 from './mainComponent/pieChart2.vue'
	import rightCenter from './mainComponent/rightCenter.vue'
	import centerMain from './mainComponent/centerMain.vue'
	export default {
		components: {
			bottomLeft,
			bottomRightChart,
			gaugeChart1,
			gaugeChart2,
			pieChart1,
			pieChart2,
			rightCenter,
			centerMain
		},
		mounted() {
			this.getSystemInfo()
			this.timer1 = setInterval(this.reportDateChange, 12 * 60 * 60 * 1000);
			this.timer2 = setInterval(this.getSystemInfo, 1 * 60 * 1000);
		},
		beforeDestroy() {
			clearInterval(this.timer1);
			clearInterval(this.timer2);
		},


		data() {
			return {
				reportCata: "pac",
				buttonShow: true,
				url: {
					systemInfo: "/other/dp/xitong/info"
				},
				timer1: null,
				timer2: null,

				// percentage1: 0,
				// percentage2: 0,
				// percentage3: 0,
				diskInfo: [{
						"name": "本地固定磁盘 (C:)",
						"usableSpaceGB": 100,
						"totalSpaceGB": 100,
						"mount": "C:\\"
					},
					{
						"name": "本地固定磁盘 (D:)",
						"usableSpaceGB": 100,
						"totalSpaceGB": 100,
						"mount": "D:\\"
					},
					{
						"name": "本地固定磁盘 (E:)",
						"usableSpaceGB": 100,
						"totalSpaceGB": 100,
						"mount": "E:\\"
					},{
						"name": "本地固定磁盘 (C:)",
						"usableSpaceGB": 100,
						"totalSpaceGB": 100,
						"mount": "C:\\"
					},
					{
						"name": "本地固定磁盘 (D:)",
						"usableSpaceGB": 100,
						"totalSpaceGB": 100,
						"mount": "D:\\"
					},
					{
						"name": "本地固定磁盘 (E:)",
						"usableSpaceGB": 100,
						"totalSpaceGB": 100,
						"mount": "E:\\"
					},
					{
						"name": "本地固定磁盘 (E:)",
						"usableSpaceGB": 100,
						"totalSpaceGB": 100,
						"mount": "E:\\"
					}
				],
				percentage4: 0,
				percentage5: 0,
				reportDate: this.$moment().subtract(1, 'days').format('YYYY-MM-DD')
			}
		},
		methods: {
			reportDateChange() {
				this.reportDate = this.$moment().subtract(1, 'days').format('YYYY-MM-DD')
			},
			getSystemInfo() {
				var _this = this
				this.$ajax({
					method: 'get',
					url: this.url.systemInfo,
				}).then(function(resultData) {
					var resData = resultData.data.data
					var resInfo = resData.info
					console.log(resInfo)
					//已占用内存
					_this.percentage5 = 100 - parseInt((resInfo.MemoryInfo.availableMemoryMB / resInfo.MemoryInfo
						.totalMemoryMB).toFixed(1) * 100)
					//已占用内存
					_this.percentage4 = resInfo.CPU.toFixed(1)
					_this.diskInfo = resInfo.partition
				})
			},
			getGradientColor(percentage) {
				// 根据进度动态返回渐变色
				if (percentage < 50) {
					return '#00BFFF'; // 蓝色
				} else if (percentage < 80) {
					return 'linear-gradient(to right, #00BFFF, #40E0D0)'; // 蓝绿渐变
				} else {
					return 'linear-gradient(to right, #40E0D0, #FF69B4)'; // 绿到粉红
				}
			},
			// 设置进度
			setItemProgress(data) {
				return 100 - parseInt((data.usableSpaceGB / data.totalSpaceGB).toFixed(1) * 100)
			},

			// 自定义进度条文字
			setItemText(row) {
				return () => {
					return '可用： ' + row.usableSpaceGB.toFixed(2) + ' G'
				}

			},

			// 设置当前进度条状态，显示不同颜色
			setItemStatus(data) {
				if (this.setItemProgress(data) >= 80) {
					return 'exception'
				} else if (this.setItemProgress(data) >= 60) {
					return 'warning'
				} else {
					return 'success'
				}
			}
		}
	}
</script>

<style scoped>
	.title2 {
		line-height: 22px;
		color: rgba(6, 209, 219, 1);
		font-size: 18px;
		width: 80px;
		font-weight: 300;
		/* margin-left: 10px; */
	}



	.value {
		line-height: 22px;
		color: rgba(255, 204, 0, 1);
		font-size: 18px;
		font-weight: 300;
	}

	.unit {
		line-height: 17px;
		margin-left: 5px;
		color: rgba(49, 140, 212, 1);
		font-size: 14px;
	}

	/* 容器样式 */
	.ring-container {
		position: relative;
		width: 100px;
		height: 100px;
		margin: 0 auto;
	}

	/* 外环样式 */
	.ring {
		width: 100%;
		height: 100%;
		border: 5px solid #FFD700;
		/* 圆环颜色 */
		border-radius: 50%;
		position: relative;
		box-sizing: border-box;

		/* 使用 clip-path 创建底部缺口 */
		/* 		clip-path: polygon(0 0,
				100% 0,
				100% 85%,
				50% 85%,
				50% 100%,
				50% 85%,
				0 85%); */
		clip-path: polygon(0 0,
				100% 0,
				100% 80%,
				50% 80%,
				50% 100%,
				50% 80%,
				0 80%);
	}

	/* 中心文字 */
	.inner-text {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		font-size: 28px;
		color: #fff;
		/* font-weight: bold; */
		text-align: center;
	}



	/* 按钮样式 */
	.growth-button {
		position: absolute;
		bottom: 5px;
		left: 50%;
		transform: translateX(-50%);
		width: 55px;
		height: 20px;
		background-color: transparent;
		/* 镂空效果 */
		border: 2px solid #FFD700;
		/* 与圆环相同颜色 */
		border-radius: 15px;
		text-align: center;
		line-height: 16px;
		color: #FFD700;
		font-size: 10px;
		cursor: pointer;
		box-sizing: border-box;
	}



	/deep/.el-progress-bar__outer {
		background: rgba(21, 66, 206, 0.3) !important;
	}

	/* 	/deep/ .el-progress-bar__inner {
		background:#00BFFF
	} */
	/deep/ .el-progress-bar__innerText {
		color: #FFF !important;
	}

	/deep/.radio-group-container .el-radio-button {
		margin-right: 10px;
		/* 设置右侧间距 */
		/* border-radius: 10px; */
	}

	/deep/.radio-group-container .el-radio-button__inner {
		border-radius: 5px;
		background-color: transparent;
		/* 设置背景色为透明 */
		color: #8CB1D6;
		/* 设置文字颜色为蓝色 */
		/* border-color: #1548a1; */
		/* 设置边框颜色为蓝色 */
		border: none;
		border: 2px solid #1a5cd7;
	}

	/deep/ .el-radio-button.is-active .el-radio-button__inner {
		background-color: #1a5cd7;
		/* 选中时背景色仍为透明 */
		color: #ffffff;
		/* 选中时文字颜色为蓝色 */
		border: 2px solid #1a5cd7;
		/* 选中时边框颜色为蓝色 */
	}

	/deep/.el-radio-button__orig-radio:checked+.el-radio-button__inner {
		box-shadow: none
	}
</style>